<script>
import {getUserInfo} from "@/api/User";

export default {
  name: 'InterviewUser',
  data() {
    return {
      userInfo: {},
    }
  },
  methods: {
    logOut() {
      this.$router.push('/login')
      localStorage.removeItem('token')
    }
  },
  async created() {
    const res = await getUserInfo()
    // console.log(res)
    this.userInfo = res.data
  },
}
</script>

<template>
  <div class="user">
    <div class="header">
      <img :src="userInfo.avatar" alt="">
      <div class="name"><h3>{{userInfo.username}}</h3></div>
    </div>
    <div class="TagBar">
      <div class="tagItem">
        <van-icon name="underway-o" size="30" @click="$router.push('/layout/article')"/>
        <div class="tagName">历史记录</div>
      </div>
      <div class="tagItem" @click="$router.push('/layout/collect')">
        <van-icon name="bookmark-o" size="30" />
        <div class="tagName">我的收藏</div>
      </div>
      <div class="tagItem">
        <van-icon name="thumb-circle-o" size="30" @click="$router.push('/layout/like')"/>
        <div class="tagName">我的点赞</div>
      </div>
    </div>
    <div class="navBar">
      <van-cell title="推荐分享" is-link />
      <van-cell title="意见反馈" is-link />
      <van-cell title="关于我们" is-link />
      <van-cell title="退出登录" is-link @click="logOut"/>
    </div>
  </div>
</template>

<style lang="less" scoped>
.user {
  height: 667px;
  background-color: #f5f5f5;
  padding: 10px;
  .header {
    padding: 20px;
    display: flex;
    align-items: center;
    img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
    .name {
      margin-left: 10px;
    }
  }
  .TagBar {
    display: flex;
    justify-content: space-around;
    padding: 15px 0;
    background-color: #ffffff;
    margin-bottom: 15px;
    .tagItem {
      text-align: center;
      .tagName {
        margin-top: 5px;
      }
    }
  }
}
</style>